<template>
  <view
      style="z-index: 29999;"
      class="w-full fixed top-0 left-0 right-0 bg-black bg-opacity-70 min-h-screen" @touchstart="selfTouchstartFn" @touchmove="selfTouchmoveFn"  @touchend="selfTouchendFn"
      :style="{
        top: showTopY + 'rpx'
      }"
  >
    <u-transition :show="query_more" :duration="200" mode="slide-down">
    <!--地址条-->
    <view class=" h-12 flex  justify-between items-center bg-yellow-400 px-4 py-2 text-black">
      <view
          @click.stop="goToPageUrl('/ymq_canyino2o/pages/daya-city/daya-city')"
          class="w-1/3 mr-5 flex justify-start items-center ">
        <image class="w-4 h-4" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/address.png"></image>
        <view>{{app_city || '全国'}}</view>
        <image class="w-4 h-4" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/jiantou.png"></image>
      </view>

      <view class="flex-1 ">
        <!--<u-search-->
        <!--    placeholder="搜索店铺"-->
        <!--    :height="64"-->
        <!--    bgColor="#ffffff"-->
        <!--    :showAction="true"-->
        <!--    actionText="搜索"-->
        <!--    :animation="true"-->
        <!--    :value="query.keywords"-->
        <!--    @clear="query.keywords=''"-->
        <!--    @custom="searchKeyword"-->
        <!--    @search="searchKeyword"-->
        <!--    :actionStyle="{-->
        <!--      color: '#ffffff',-->
        <!--      // background: '#ff0000',-->
        <!--      border: '1px solid #ff0000',-->
        <!--      borderRadius: '4px',-->
        <!--      padding: '4px 0'-->
        <!--    }"-->
        <!--&gt;</u-search>-->
      </view>
    </view>

    <!--附近商家-->
    <view class="px-4 py-4 bg-white rounded-b-xl">
      <div class="flex flex-row justify-between items-center">
        <div class="flex justify-center items-center"
             @click.stop="query.by=''"
        >
          综合排序
          <image v-show="query.by==''"  class="w-3 h-3 ml-1" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/arrow-bottom.png" mode="scaleToFill" />
        </div>
        <div class="flex justify-center items-center"
             @click.stop="query.by='juli asc'"
        >离我最近
          <image v-show="query.by=='juli asc'"  class="w-3 h-3 ml-1" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/arrow-bottom.png" mode="scaleToFill" />
        </div>

        <!--<div class="flex justify-center items-center"-->
        <!--		 :class="query.yhhd?'query-active':''"-->
        <!--&gt;会员红包</div>-->

        <div @click.stop="closeStoreFilter"
             class="flex justify-center items-center"
        >
          <u-badge class="mr-5" style="margin-left: 5px;" v-show="query.nopsf || query.nostart || query.yhhd" type="warning" max="99" :isDot="true"></u-badge>
          <text>筛选</text>
          <image class="w-3 h-3 ml-1" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/arrow-bottom.png" mode="scaleToFill" />
        </div>
      </div>

      <view class="mt-5 flex justify-start items-center">
        <u-search
            placeholder="搜索店铺"
            :height="64"
            bgColor="#fff"
            border-color="#666"
            :showAction="true"
            actionText="搜索"
            :animation="false"
            :value="query.keywords"
            @clear="query.keywords=''"
            @custom="searchKeyword"
            @search="searchKeyword"
            :actionStyle="{
              color: '#666',
              background: '#fff',
              border: '1px solid #666',
              borderRadius: '4px',
              padding: '4px 0'
            }"
        ></u-search>
      </view>

      <!--配送服务-->
      <view class="mt-5 flex justify-start items-center">
        <view class="w-2 bg-yellow-400 h-5 rounded-sm text-md"></view>
        <view class="ml-2 font-bold">配送服务</view>
      </view>
      <view class="mt-2 daya-filter-row">
        <view @click.stop="query.ps_type=query.ps_type=='pt'?'':'pt'" class="daya-filter-btn" :class="query.ps_type=='pt'?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/qsps.png" mode="scaleToFill" />
          <view>超级配送</view>
        </view>
        <view @click.stop="query.ps_type=query.ps_type=='sj'?'':'sj'" class="daya-filter-btn" :class="query.ps_type=='sj'?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/sjps.png" mode="scaleToFill" />
          <view>商家自送</view>
        </view>
        <view class="flex-1"></view>
      </view>

      <!--速度-->
      <view class="mt-5 flex justify-start items-center">
        <view class="w-2 bg-yellow-400 h-5 rounded-sm text-md"></view>
        <view class="ml-2 font-bold">速度</view>
      </view>
      <view class="mt-2 daya-filter-row">
        <view @click.stop="query.ps_sudu=query.ps_sudu==40?0:40" class="daya-filter-btn" :class="query.ps_sudu==40?'daya-filter-btn-active':''">40分钟内</view>
        <view @click.stop="query.ps_sudu=query.ps_sudu==50?0:50" class="daya-filter-btn" :class="query.ps_sudu==50?'daya-filter-btn-active':''">50分钟内</view>
        <view @click.stop="query.ps_sudu=query.ps_sudu==60?0:60" class="daya-filter-btn" :class="query.ps_sudu==60?'daya-filter-btn-active':''">60分钟内</view>
      </view>
      <view class="mt-2 daya-filter-row">
        <view @click.stop="query.juli=query.juli==2?0:2" class="daya-filter-btn" :class="query.juli==2?'daya-filter-btn-active':''">2km内</view>
        <view @click.stop="query.juli=query.juli==3?0:3" class="daya-filter-btn" :class="query.juli==3?'daya-filter-btn-active':''">3km内</view>
        <view @click.stop="query.juli=query.juli==5?0:5" class="daya-filter-btn" :class="query.juli==5?'daya-filter-btn-active':''">5km内</view>
      </view>


      <!--优惠活动(单选)-->
      <view class="mt-5 flex justify-start items-center">
        <view class="w-2 bg-yellow-400 h-5 rounded-sm text-md"></view>
        <view class="ml-2 font-bold">优惠活动</view>
      </view>

      <view class="mt-2 daya-filter-row">
        <view @click.stop="query.is_brand=!query.is_brand" class="daya-filter-btn" :class="query.is_brand==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/pzyx.png" mode="scaleToFill" />
          <view>品质优选</view>
        </view>
        <view @click.stop="query.dy_is_service_station=!query.dy_is_service_station" class="daya-filter-btn" :class="query.dy_is_service_station==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/sqfwz.png" mode="scaleToFill" />
          <view>社区服务站</view>
        </view>
        <view @click.stop="query.is_select=!query.is_select" class="daya-filter-btn" :class="query.is_select==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/jxhd.png" mode="scaleToFill" />
          <view>精选好店</view>
        </view>
      </view>

      <view class="mt-2 daya-filter-row">
        <view @click.stop="query.type_id=query.type_id==40?0:40" class="daya-filter-btn" :class="query.type_id==40?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/rmhd.png" mode="scaleToFill" />
          <view>热门好店</view>
        </view>
        <view @click.stop="query.is_open=!query.is_open" class="daya-filter-btn" :class="query.is_open==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/zzyy.png" mode="scaleToFill" />
          <view>正在营业</view>
        </view>
        <view @click.stop="query.xyh_open=!query.xyh_open" class="daya-filter-btn" :class="query.xyh_open==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/xyhlj.png" mode="scaleToFill" />
          <view>新用户立减</view>
        </view>
      </view>

      <view class="mt-2 daya-filter-row">
        <view @click.stop="query.yhhd=!query.yhhd" class="daya-filter-btn" :class="query.yhhd==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/yhhd.png" mode="scaleToFill" />
          <view>优惠活动</view>
        </view>
        <view @click.stop="query.is_zt=!query.is_zt" class="daya-filter-btn" :class="query.is_zt==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/kddyc.png" mode="scaleToFill" />
          <view>可到店用餐</view>
        </view>
        <view @click.stop="query.is_ps=!query.is_ps" class="daya-filter-btn" :class="query.is_ps==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/qsps.png" mode="scaleToFill" />
          <view>可外卖配送</view>
        </view>
      </view>

      <view class="mt-2 daya-filter-row">
        <view @click.stop="query.nostart=!query.nostart" class="daya-filter-btn" :class="query.nostart==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/lyqs.png" mode="scaleToFill" />
          <view>0元起送</view>
        </view>
        <view @click.stop="query.nopsf=!query.nopsf" class="daya-filter-btn" :class="query.nopsf==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/wpsf.png" mode="scaleToFill" />
          <view>无配送费</view>
        </view>

        <view @click.stop="query._youhuiquan=!query._youhuiquan" class="daya-filter-btn" :class="query._youhuiquan==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/_youhuiquan.png" mode="scaleToFill" />
          <view>可用优惠券</view>
        </view>

        <!--<view @click.stop="query.is_yuepay=!query.is_yuepay" class="daya-filter-btn" :class="query.is_yuepay==1?'daya-filter-btn-active':''">-->
        <!--  <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/qsps.png" mode="scaleToFill" />-->
        <!--  <view>可余额支付</view>-->
        <!--</view>-->
        <!--<view class="flex-1">-->
        <!--</view>-->
      </view>

      <view class="mt-2 daya-filter-row">
        <view @click.stop="query._hongbao=!query._hongbao" class="daya-filter-btn" :class="query._hongbao==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/_hongbao.png" mode="scaleToFill" />
          <view>可用红包</view>
        </view>
        <view @click.stop="query._huiyuanka=!query._huiyuanka" class="daya-filter-btn" :class="query._huiyuanka==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/_huiyuanka.png" mode="scaleToFill" />
          <view>会员卡</view>
        </view>
        <view @click.stop="query._manjian=!query._manjian" class="daya-filter-btn" :class="query._manjian==1?'daya-filter-btn-active':''">
          <image class="w-5 h-5 mr-2" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/img-store-filter/_manjian.png" mode="scaleToFill" />
          <view>满减优惠</view>
        </view>
      </view>

      <!--按钮区域-->
      <view class="mt-5 flex justify-between items-center gap-4">
        <view @click.stop="resetQuery" class="daya-btn bg-gray-50 text-gray-700 text-xl">清楚筛选</view>
        <view @click.stop="updateQuery" class="daya-btn   text-xl">完  成</view>
      </view>

    </view>

    </u-transition>

  </view>
</template>
<script>
export default {
  name: 'daya-store-filter',
  props: {
    prop_query: {
      type:Object,
      default() {
        return {
          // app_city: '', //城市名称
          keywords: '', //店铺名称关键字搜索
          by: '', //排序字段 number+asc 排序
          ps_type: '', //配送方式: ps_type=sj商家配送 dada达达配送 kfw快服务 pt平台超级跑腿 sss闪时送
          juli: 0, //距离范围 2 3 5
          ps_sudu: 0, //配送速度时间范围内,分钟 40 50 60
          is_brand:0,//品质优选
          xyh_open:0,//新用户立减
          dy_is_service_station:0,//服务站
          is_select:0,//精选好店
          is_yuepay:0,//余额支付
          type_id:0,//门店类型 40=热门 41=好店
          is_open:0,//是否营业
          nopsf:0,//无配送费
          nostart:0,//无起送费用
          yhhd:0,//优惠活动
          is_ps:0,//外卖配送
          is_zt:0,//到店用餐
        }
      },
    },
    app_city:{
      type:String,
      default:'全国'
    },
    prop_query_more:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {

      moveDist:100,
      touch: true,
      befoY: 0,
      showTopY: 0,
      moveY: 0,
      bingo: false,


      query: this.prop_query,
      query_more:this.prop_query_more,
    }
  },
  watch: {
    prop_query:  (newVal, oldVal)=>{
      this.query=newVal
    },
    // prop_query_more:  (newVal, oldVal)=>{
    //   this.query_more=newVal
    // },
    // query_more:  (newVal, oldVal)=>{
    //   if (newVal == false) {
    //     this.$emit("closeStoreFilter")
    //   }
    // },
  },
  methods: {
    selfTouchstartFn(e){
      //记录开始滑动的位置
      this.bingo = true;
      this.befoY = e.changedTouches[0].pageY;
    },
    selfTouchmoveFn(e){
      if (this.befoY) {
        let temp_moveY=e.changedTouches[0].pageY - this.befoY
        console.log("selfTouchmoveFn temp_moveY",temp_moveY)
        //大于0是从上往下,是打开动作
        //小于0是从下往上,是关闭动作
        if (temp_moveY < 0) {
          this.moveX = temp_moveY;
          this.showTopY = temp_moveY;
        }
      }
    },
    selfTouchendFn(e){
      let temp_moveY=e.changedTouches[0].pageY - this.befoY
      //小于0是从右往左,是关闭动作
      //所以这里移动距离要小于此阈值
      if (temp_moveY < -1*this.moveDist) {
        while (this.showTopY>-1750){
          console.log("showTopY",this.showTopY)
          this.showTopY-=10
        }
        this.showTopY = -1750;
        this.$emit("closeStoreFilter")
      }else{
        this.showTopY = 0;
      }
      //停止导航的滑动
      this.befoY = 0;
      this.moveX = 0; //滑动的距离
      this.bingo = false;
    },

    searchKeyword(value) {
      this.query.keywords=value
    },
    closeStoreFilter() {
      this.$emit("closeStoreFilter")
    },
    updateQuery() {
      // this.query.keywords=this.query.keywords.trim()
      this.$emit("updateQueryX", this.query)
      this.$emit("closeStoreFilter")
    },
    resetQuery() {
      let temp_query={
        keywords: '', //店铺名称关键字搜索
        by: '', //排序字段 number+asc 排序
        ps_type: '', //配送方式: ps_type=sj商家配送 dada达达配送 kfw快服务 pt平台超级跑腿 sss闪时送
        juli: 0, //距离范围 2 3 5
        ps_sudu: 0, //配送速度时间范围内,分钟 40 50 60
        is_brand:0,//品质优选
        xyh_open:0,//新用户立减
        dy_is_service_station:0,//新用户立减
        is_select:0,//精选好店
        is_yuepay:0,//余额支付
        type_id:0,//门店类型 40=热门 41=好店
        is_open:0,//是否营业
        nopsf:0,//无配送费
        nostart:0,//无起送费用
        yhhd:0,//优惠活动
        is_ps:0,//外卖配送
        is_zt:0,//到店用餐
      }

      //将this.query中temp_query也包含的属性重置为temp_query默认的数据
      for (let key in this.query) {
        if (temp_query.hasOwnProperty(key)) {
          this.query[key] = temp_query[key]
        }
      }
      this.$emit("updateQuery", this.query)
      this.$emit("closeStoreFilter")
    },
  }
}
</script>

